Performance Timeline: Een Uitgebreide Gids voor het Verzamelen van Metrieken

In de snelle digitale wereld van vandaag zijn de prestaties van een website van het grootste belang. Gebruikers verwachten dat websites snel laden en direct reageren. Een trage website kan leiden tot frustratie, verlaten sessies en uiteindelijk tot verloren inkomsten. Gelukkig bieden moderne webbrowsers krachtige tools voor het meten en analyseren van websiteprestaties. Een van de meest waardevolle van deze tools is de Performance Timeline API.

Deze uitgebreide gids zal de Performance Timeline API in detail verkennen, en behandelt alles van de fundamentele concepten tot geavanceerde technieken voor het verzamelen en analyseren van prestatiemetrieken. We duiken in de verschillende typen performance entries, demonstreren hoe je de API effectief kunt gebruiken en geven praktische voorbeelden om je te helpen de prestaties van je website te optimaliseren.

Wat is de Performance Timeline API?

De Performance Timeline API is een set JavaScript-interfaces die toegang bieden tot prestatiegerelateerde gegevens die door de browser worden verzameld. Het stelt ontwikkelaars in staat om verschillende aspecten van websiteprestaties te meten, zoals:

• Paginlaadtijd
• Laadtijd van resources (afbeeldingen, scripts, stylesheets)
• Gebruikerstiming-metingen
• Frame rate en renderprestaties
• Geheugengebruik

Door deze gegevens te verzamelen en te analyseren, kunnen ontwikkelaars prestatieknelpunten identificeren en optimalisaties doorvoeren om de gebruikerservaring te verbeteren. De API biedt een gestandaardiseerde manier om toegang te krijgen tot prestatiegegevens, wat het gemakkelijker maakt om cross-browser tools voor prestatiemonitoring te bouwen.

Belangrijkste Concepten en Interfaces

De Performance Timeline API draait om een paar belangrijke concepten en interfaces:

• Performance Timeline: Vertegenwoordigt de tijdlijn van prestatiegebeurtenissen die hebben plaatsgevonden tijdens de levensduur van een webpagina. Het is het centrale punt voor toegang tot prestatiegegevens.
• Performance Entry: Vertegenwoordigt een enkele prestatiegebeurtenis, zoals een resource-laadgebeurtenis of een door de gebruiker gedefinieerde timingmeting.
• Performance Observer: Stelt ontwikkelaars in staat om de Performance Timeline te monitoren op nieuwe performance entries en hier in real-time op te reageren.
• `performance`-object: Het globale object (`window.performance`) dat toegang biedt tot de Performance Timeline en gerelateerde methoden.

Het `performance`-object

Het `performance`-object is het startpunt voor interactie met de Performance Timeline API. Het biedt methoden voor het ophalen van performance entries, het wissen van de tijdlijn en het creëren van performance observers. Enkele van de meest gebruikte methoden zijn:

• `performance.getEntries()`: Geeft een array terug van alle performance entries in de tijdlijn.
• `performance.getEntriesByName(name, entryType)`: Geeft een array terug van performance entries met een specifieke naam en type.
• `performance.getEntriesByType(entryType)`: Geeft een array terug van performance entries van een specifiek type.
• `performance.clearMarks(markName)`: Wist performance marks met een specifieke naam.
• `performance.clearMeasures(measureName)`: Wist performance measures met een specifieke naam.
• `performance.now()`: Geeft een hoge-resolutie tijdstempel terug, meestal in milliseconden, die de verstreken tijd sinds de start van de navigatie weergeeft. Dit is cruciaal voor het meten van duur.

Typen Performance Entries

De Performance Timeline API definieert verschillende typen performance entries, die elk een specifiek type prestatiegebeurtenis vertegenwoordigen. Enkele van de belangrijkste typen zijn:

• `navigation`: Vertegenwoordigt de navigatietiming voor het laden van een pagina, inclusief DNS-lookup, TCP-verbinding, request- en responstijden.
• `resource`: Vertegenwoordigt het laden van een specifieke resource, zoals een afbeelding, script of stylesheet.
• `mark`: Vertegenwoordigt een door de gebruiker gedefinieerde tijdstempel in de tijdlijn.
• `measure`: Vertegenwoordigt een door de gebruiker gedefinieerde duur in de tijdlijn, berekend tussen twee marks.
• `paint`: Vertegenwoordigt de tijd die de browser nodig heeft om de eerste content op het scherm te tekenen (First Paint) en de eerste betekenisvolle content (First Contentful Paint).
• `longtask`: Vertegenwoordigt taken die de hoofdthread voor een langere periode blokkeren (meestal langer dan 50ms), wat mogelijk UI-haperingen veroorzaakt.
• `event`: Vertegenwoordigt een browsergebeurtenis, zoals een muisklik of toetsaanslag.
• `layout-shift`: Vertegenwoordigt onverwachte verschuivingen in de paginalay-out die de gebruikerservaring kunnen verstoren (Cumulative Layout Shift).
• `largest-contentful-paint`: Vertegenwoordigt de tijd die het grootste contentelement in de viewport nodig heeft om zichtbaar te worden.

Prestatiegegevens Verzamelen

Er zijn verschillende manieren om prestatiegegevens te verzamelen met de Performance Timeline API. De meest voorkomende benaderingen zijn:

• Entries rechtstreeks uit de tijdlijn ophalen: Gebruik `performance.getEntries()`, `performance.getEntriesByName()`, of `performance.getEntriesByType()` om specifieke performance entries op te halen.
• Een Performance Observer gebruiken: De tijdlijn monitoren op nieuwe entries en hier in real-time op reageren.

Entries Rechtstreeks Ophalen

De eenvoudigste manier om prestatiegegevens te verzamelen is door entries rechtstreeks uit de tijdlijn op te halen. Dit is handig voor het verzamelen van gegevens nadat een specifieke gebeurtenis heeft plaatsgevonden, zoals nadat de pagina is geladen of nadat een gebruiker interactie heeft gehad met een specifiek element.

Hier is een voorbeeld van hoe u alle resource-entries uit de tijdlijn kunt ophalen:

            
const resourceEntries = performance.getEntriesByType("resource");

resourceEntries.forEach(entry => {
 console.log(`Resource: ${entry.name}, Duration: ${entry.duration}ms`);
});

            

              
                Copy
              
            
          

Deze code haalt alle entries van het type "resource" op en logt de naam en duur van elke resource naar de console.

Een Performance Observer Gebruiken

Een Performance Observer stelt u in staat de Performance Timeline te monitoren op nieuwe performance entries en hier in real-time op te reageren. Dit is met name handig voor het verzamelen van gegevens zodra deze beschikbaar komen, zonder de tijdlijn herhaaldelijk te hoeven pollen.

Hier is een voorbeeld van hoe u een Performance Observer kunt gebruiken om te monitoren op nieuwe resource-entries:

            
const observer = new PerformanceObserver((list) => {
 list.getEntries().forEach(entry => {
 console.log(`Resource loaded: ${entry.name}, duration: ${entry.duration}ms`);
 });
});

observer.observe({ entryTypes: ["resource"] });

            

              
                Copy
              
            
          

Deze code creëert een Performance Observer die luistert naar nieuwe entries van het type "resource". Wanneer een nieuwe resource-entry aan de tijdlijn wordt toegevoegd, wordt de callback-functie van de observer uitgevoerd, die de naam en duur van de resource naar de console logt. De `observer.observe()`-methode specificeert welke entry-typen de observer moet monitoren.

Gebruikerstiming Meten

De Performance Timeline API stelt u ook in staat om uw eigen aangepaste prestatiemetrieken te definiëren met behulp van de `mark`- en `measure`-entrytypen. Dit is handig voor het meten van de tijd die specifieke onderdelen van uw applicatie nodig hebben om uit te voeren, zoals het renderen van een component of het verwerken van gebruikersinvoer.

Om gebruikerstiming te meten, creëert u eerst een `mark` om het begin en einde van de sectie die u wilt meten te markeren. Vervolgens creëert u een `measure` om de duur tussen de twee marks te berekenen.

Hier is een voorbeeld van hoe u de tijd kunt meten die nodig is om een component te renderen:

            
performance.mark("component-render-start");

// Code to render the component

performance.mark("component-render-end");

performance.measure("component-render-time", "component-render-start", "component-render-end");

const measure = performance.getEntriesByName("component-render-time", "measure")[0];

console.log(`Component render time: ${measure.duration}ms`);

            

              
                Copy
              
            
          

Deze code creëert twee marks, `component-render-start` en `component-render-end`, voor en na de code die de component rendert. Vervolgens creëert het een measure genaamd `component-render-time` om de duur tussen de twee marks te berekenen. Ten slotte haalt het de measure-entry uit de tijdlijn op en logt de duur naar de console.

Prestatiegegevens Analyseren

Zodra u prestatiegegevens hebt verzameld, moet u deze analyseren om prestatieknelpunten te identificeren en optimalisaties door te voeren. Er zijn verschillende tools en technieken die u hiervoor kunt gebruiken:

• Browser Developer Tools: De meeste moderne webbrowsers bieden ingebouwde ontwikkelaarstools waarmee u prestatiegegevens kunt visualiseren en analyseren. Deze tools bevatten doorgaans een Performance-paneel dat een tijdlijn van prestatiegebeurtenissen toont, evenals tools voor het profileren van JavaScript-code en het analyseren van geheugengebruik.
• Performance Monitoring Tools: Er zijn veel externe tools voor prestatiemonitoring die u kunnen helpen bij het verzamelen, analyseren en visualiseren van prestatiegegevens. Deze tools bieden vaak geavanceerde functies zoals real-time monitoring, anomaliedetectie en geautomatiseerde rapportage. Voorbeelden zijn New Relic, Datadog en Sentry.
• Web Vitals: Het Web Vitals-initiatief van Google biedt een set metrieken die als essentieel worden beschouwd voor het meten van de gebruikerservaring. Deze metrieken omvatten Largest Contentful Paint (LCP), First Input Delay (FID) en Cumulative Layout Shift (CLS). Het monitoren van deze metrieken kan u helpen veelvoorkomende prestatieproblemen te identificeren en aan te pakken.

Browser Developer Tools Gebruiken

Browser developer tools zijn een krachtige en direct beschikbare bron voor het analyseren van prestaties. Hier is hoe u het Performance-paneel in Chrome Developer Tools kunt gebruiken (andere browsers hebben vergelijkbare functionaliteiten):

1. Open Developer Tools: Klik met de rechtermuisknop op de webpagina en selecteer "Inspecteren" of druk op F12.
2. Navigeer naar het Performance-paneel: Klik op het tabblad "Performance".
3. Start Opname: Klik op de opnameknop (meestal een cirkel) om te beginnen met het vastleggen van prestatiegegevens.
4. Interacteer met de Pagina: Voer de acties uit die u wilt analyseren, zoals het laden van de pagina, het klikken op knoppen of scrollen.
5. Stop Opname: Klik op de stopknop om de opname te beëindigen.
6. Analyseer de Tijdlijn: Het Performance-paneel toont een tijdlijn van prestatiegebeurtenissen, inclusief laadtijden, JavaScript-uitvoering, rendering en painting.

De tijdlijn biedt gedetailleerde informatie over elke gebeurtenis, inclusief de duur, starttijd en relatie tot andere gebeurtenissen. U kunt in- en uitzoomen, gebeurtenissen filteren op type en individuele gebeurtenissen inspecteren voor meer informatie. De tabbladen "Bottom-Up", "Call Tree" en "Event Log" bieden verschillende perspectieven op de gegevens, waardoor u prestatieknelpunten kunt identificeren en uw code kunt optimaliseren.

Web Vitals: Gebruikerservaring Meten

Web Vitals zijn een set metrieken gedefinieerd door Google om de gebruikerservaring op een website te meten. Focussen op deze metrieken kan de gebruikerstevredenheid en SEO-ranking aanzienlijk verbeteren.

• Largest Contentful Paint (LCP): Meet de tijd die het grootste contentelement in de viewport nodig heeft om zichtbaar te worden. Een goede LCP-score is 2,5 seconden of minder.
• First Input Delay (FID): Meet de tijd die de browser nodig heeft om te reageren op de eerste gebruikersinteractie (bijv. het klikken op een knop of het tikken op een link). Een goede FID-score is 100 milliseconden of minder.
• Cumulative Layout Shift (CLS): Meet de hoeveelheid onverwachte lay-outverschuivingen die op de pagina plaatsvinden. Een goede CLS-score is 0,1 of minder.

U kunt Web Vitals meten met verschillende tools, waaronder:

• Chrome User Experience Report (CrUX): Biedt real-world prestatiegegevens voor websites op basis van geanonimiseerde Chrome-gebruikersgegevens.
• Lighthouse: Een geautomatiseerde tool die de prestaties, toegankelijkheid en SEO van webpagina's controleert.
• Web Vitals Extension: Een Chrome-extensie die Web Vitals-metrieken in real-time weergeeft terwijl u op het web surft.
• PerformanceObserver API: Leg web vitals-gegevens rechtstreeks vast vanuit de browser terwijl gebeurtenissen plaatsvinden.

Praktische Voorbeelden en Toepassingen

Hier zijn enkele praktische voorbeelden en toepassingen van hoe u de Performance Timeline API kunt gebruiken om de prestaties van uw website te optimaliseren:

• Identificeren van Traag Ladende Resources: Gebruik het `resource`-entrytype om afbeeldingen, scripts en stylesheets te identificeren die lang duren om te laden. Optimaliseer deze resources door ze te comprimeren, een Content Delivery Network (CDN) te gebruiken of ze lazy te laden. Veel e-commerceplatforms zoals Shopify, Magento of WooCommerce vertrouwen bijvoorbeeld op afbeeldingen om producten te verkopen. Het optimaliseren van het laden van afbeeldingen met behulp van de performance timeline-gegevens zal de klantervaring verbeteren, vooral voor mobiele gebruikers.
• JavaScript-uitvoeringstijd Meten: Gebruik de `mark`- en `measure`-entrytypen om de tijd te meten die specifieke JavaScript-functies nodig hebben om uit te voeren. Identificeer traag draaiende functies en optimaliseer ze door efficiëntere algoritmen te gebruiken, resultaten te cachen of de uitvoering uit te stellen naar een later tijdstip.
• Lange Taken Detecteren: Gebruik het `longtask`-entrytype om taken te identificeren die de hoofdthread voor een langere periode blokkeren. Breek deze taken op in kleinere stukken of verplaats ze naar een achtergrondthread om UI-haperingen te voorkomen.
• Monitoren van First Contentful Paint (FCP) en Largest Contentful Paint (LCP): Gebruik de `paint`- en `largest-contentful-paint`-entrytypen om de tijd te monitoren die nodig is voordat de eerste content en de grootste content op het scherm verschijnen. Optimaliseer het kritieke renderpad om deze metrieken te verbeteren.
• Analyseren van Cumulative Layout Shift (CLS): Gebruik het `layout-shift`-entrytype om elementen te identificeren die onverwachte lay-outverschuivingen veroorzaken. Reserveer ruimte voor deze elementen of gebruik de `transform`-eigenschap om ze te animeren zonder lay-outverschuivingen te veroorzaken.

Geavanceerde Technieken

Zodra u een solide begrip hebt van de basisprincipes van de Performance Timeline API, kunt u enkele geavanceerde technieken verkennen om de prestaties van uw website verder te optimaliseren:

• Real User Monitoring (RUM): Verzamel prestatiegegevens van echte gebruikers in het veld om een nauwkeuriger beeld te krijgen van de prestaties van uw website. Gebruik een RUM-tool of implementeer uw eigen aangepaste RUM-oplossing met de Performance Timeline API. Deze gegevens kunnen vervolgens worden gebruikt om regionale prestatieverschillen te bepalen. Een website die bijvoorbeeld in de VS wordt gehost, kan in Azië langzamere laadtijden ervaren als gevolg van netwerklatentie.
• Synthetische Monitoring: Gebruik synthetische monitoring om gebruikersinteracties te simuleren en prestaties te meten in een gecontroleerde omgeving. Dit kan u helpen prestatieproblemen te identificeren voordat ze echte gebruikers beïnvloeden.
• Geautomatiseerd Prestatietesten: Integreer prestatietesten in uw continuous integration/continuous deployment (CI/CD) pijplijn om prestatie-regressies automatisch te detecteren. Tools zoals Lighthouse CI kunnen worden gebruikt om dit proces te automatiseren.
• Prestatiebudgetten: Stel prestatiebudgetten in voor belangrijke metrieken, zoals paginalaadtijd, resourcegrootte en JavaScript-uitvoeringstijd. Gebruik geautomatiseerde tools om deze budgetten te monitoren en u te waarschuwen wanneer ze worden overschreden.

Cross-Browser Compatibiliteit

De Performance Timeline API wordt breed ondersteund door moderne webbrowsers, waaronder Chrome, Firefox, Safari en Edge. Er kunnen echter enkele verschillen zijn in de implementatie en het gedrag van de API tussen verschillende browsers.

Om cross-browser compatibiliteit te garanderen, is het belangrijk om uw code in verschillende browsers te testen en feature detection te gebruiken om de functionaliteit graceful te degraderen als de API niet wordt ondersteund. Bibliotheken zoals `modernizr` kunnen helpen bij feature detection.

Best Practices

Hier zijn enkele best practices voor het gebruik van de Performance Timeline API:

• Gebruik Performance Observers voor real-time monitoring: Performance Observers bieden een efficiëntere manier om prestatiegegevens te verzamelen dan het herhaaldelijk pollen van de tijdlijn.
• Wees u bewust van de prestatie-impact van het verzamelen van prestatiegegevens: Het verzamelen van te veel gegevens kan de prestaties van uw website negatief beïnvloeden. Verzamel alleen de gegevens die u nodig heeft en vermijd het uitvoeren van kostbare bewerkingen in de callback-functie van de Performance Observer.
• Gebruik betekenisvolle namen voor marks en measures: Dit maakt het gemakkelijker om de gegevens te analyseren en prestatieknelpunten te identificeren.
• Test uw code in verschillende browsers: Zorg voor cross-browser compatibiliteit door uw code in verschillende browsers te testen en feature detection te gebruiken.
• Combineer met andere optimalisatietechnieken: De Performance Timeline API helpt bij het meten en identificeren van problemen. Gebruik het in combinatie met gevestigde best practices voor weboptimalisatie (beeldoptimalisatie, minificatie, CDN-gebruik) voor holistische prestatieverbeteringen.

Conclusie

De Performance Timeline API is een krachtig hulpmiddel voor het meten en analyseren van websiteprestaties. Door de belangrijkste concepten en interfaces van de API te begrijpen, kunt u waardevolle prestatiemetrieken verzamelen en deze gebruiken om prestatieknelpunten te identificeren en optimalisaties door te voeren. Door te focussen op Web Vitals en geavanceerde technieken zoals RUM en geautomatiseerd prestatietesten te implementeren, kunt u een snellere, soepelere en aangenamere gebruikerservaring leveren. Het omarmen van de Performance Timeline API en het integreren van prestatieanalyse in uw ontwikkelingsworkflow zal leiden tot aanzienlijke verbeteringen in de prestaties van uw website en gebruikerstevredenheid in de prestatiegedreven webomgeving van vandaag.